<template>
  <div class="le-matter">
    <div class="he-title">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="he-link-text">
        <el-breadcrumb-item class="he-link">
          <he-link href="channel/index"> 渠道管理 </he-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="he-link">
          <he-link href="channel/bind" :query="{ platform: platform }">
            {{ title }}
          </he-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>手动绑定</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
      <div class="flex flex-direction align-center">
        <div class="le-steps">
          <el-steps :active="step" align-center>
            <el-step title="填写公众号信息"></el-step>
            <el-step title="公众号设置"></el-step>
          </el-steps>
        </div>
        <el-form v-show="step === 1" label-width="100px" class="le-form" ref="form" :model="form" :rules="rules">
          <el-form-item label="公众号名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入公众号名称"></el-input>
          </el-form-item>
          <el-form-item label="公众号类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="AppID" prop="appId">
            <el-input v-model="form.AppID" placeholder="请输入AppID"></el-input>
          </el-form-item>
          <el-form-item label="AppSecret" prop="appSecret">
            <el-input v-model="form.AppSecret" placeholder="请输入AppSecret"></el-input>
          </el-form-item>
          <el-form-item label="验证文件" prop="file">
            <el-input v-model="form.file_name">
              <template slot="append">
                <el-upload
                  action=""
                  ref="upload"
                  :on-change="handleChange"
                  :http-request="upload"
                  :limit="1"
                  :auto-upload="false"
                  :show-file-list="false"
                  >选择文件</el-upload
                >
              </template>
            </el-input>
            <el-button
              class="le-view-guidelines"
              module="channel"
              title="验证文件下载指引"
              type="text"
              width="720"
              :hide_close="true"
              height="676"
              v-popup.uploadGuide
              sure_btn="我知道了"
              >查看指引</el-button
            >
          </el-form-item>
        </el-form>
        <div class="le-deploy" v-show="step === 2">
          <div class="le-deploy-1">服务器配置</div>
          <div class="le-deploy-2">
            <span class="le-deploy-1">请将以下信息填入微信公众号，并启用服务器配置。完成操作后，再保存此页面。</span>
            <el-button
              class="le-view-guidelines"
              module="channel"
              title="服务器配置指引"
              type="text"
              width="720"
              :hide_close="true"
              v-popup.deployGuide
              sure_btn="已完成配置"
              >查看指引</el-button
            >
          </div>
          <div class="le-deploy__item">
            <span class="le-item__label">服务器地址(URL)</span>
            <span class="le-item__value" id="url">{{ form.url }}</span>
            <el-button type="text" class="le-view-guidelines" @click="copy('url')">复制</el-button>
          </div>
          <div class="le-deploy__item">
            <span class="le-item__label">令牌(Token)</span>
            <span class="le-item__value" id="token">{{ form.token }}</span>
            <el-button type="text" class="le-view-guidelines" @click="copy('token')">复制</el-button>
          </div>
          <div class="le-deploy__item flex align-center">
            <span class="le-item__label">消息加解密密钥<br />(EncodingAESKey)</span>
            <span class="le-item__value" id="key">{{ form.encodingAesKey }}</span>
            <el-button type="text" class="le-view-guidelines" @click="copy('key')">复制</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <div class="le-cardpin">
      <el-button>取消</el-button>
      <el-button type="primary" v-if="step === 1" @click="setStep(2)">下一步</el-button>
      <template v-if="step === 2">
        <el-button @click="setStep(1)">上一步</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'manualBinding',
  data() {
    return {
      title: '',
      platform: '',
      form: {
        type: '',
        name: '',
        AppID: '',
        AppSecret: '',
        file_name: '',
        token: '',
        encodingAesKey: '',
        url: ''
      },
      rules: {
        name: [{ required: true, message: '请输入公众号名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择公众号类型', trigger: 'change' }],
        appId: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
        appSecret: [{ required: true, message: '请输入AppSecret', trigger: 'blur' }]
      },
      typeList: [
        {
          label: '订阅号',
          value: 10
        },
        {
          label: '认证订阅号',
          value: 11
        },
        {
          label: '服务号',
          value: 20
        },
        {
          label: '认证服务号/认证政府订阅号/认证媒体订阅号',
          value: 21
        }
      ],
      step: 1
    };
  },
  mounted() {
    let platform = this.$getQueryVariable('platform');
    this.platform = platform;
    switch (platform) {
      case 'applets':
        this.title = '绑定小程序';
        break;
      case 'wechat':
        this.title = '绑定公众号';
        break;
    }

    this.getConfig();
  },
  methods: {
    getConfig: function () {
      this.$heshop
        .appconfig('get')
        .then(res => {
          this.form = res.apply.wechat;
          this.form.file_name = '';
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    setStep: function (num) {
      this.step = num;
    },
    save: function () {
      let data = {
        type: this.form.type,
        name: this.form.name,
        AppID: this.form.AppID,
        AppSecret: this.form.AppSecret,
        token: this.form.token,
        encodingAesKey: this.form.encodingAesKey
      };
      this.$heshop
        .appconfig(
          'post',
          {
            behavior: 'save',
            key: 'apply_wechat'
          },
          data
        )
        .then(() => {
          this.$notify({
            title: '保存成功',
            message: '公众号手动绑定成功。',
            type: 'success'
          });
          this.$refs.upload.submit();
        })
        .catch(err => {
          console.error(err);
          this.$message.error(err.data.message);
        });
    },
    handleChange: function (e) {
      this.form.file_name = e.name;
      this.$forceUpdate();
    },
    upload(param) {
      var formData = new FormData();
      formData.append('file', param.file);
      this.$heshop
        .file(formData, { behavior: 'upload' })
        .then(() => {})
        .catch(error => {
          console.error('数据出出力', error);
        });
    },
    copy: function (id, attr = 'innerText') {
      let target = null;

      if (attr) {
        target = document.createElement('div');
        target.id = 'tempTarget';
        target.style.opacity = '0';
        if (id) {
          let curNode = document.querySelector('#' + id);
          target.innerText = curNode[attr];
        } else {
          target.innerText = attr;
        }
        document.body.appendChild(target);
      } else {
        target = document.querySelector('#' + id);
      }

      try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
      } catch (e) {
        console.error('复制失败');
      }

      if (attr) {
        // remove temp target
        target.parentElement.removeChild(target);
      }
    }
  }
};
</script>
<style scoped>
.flex {
  display: flex;
}

.flex-direction {
  flex-direction: column;
}

.le-steps {
  width: 60%;
}

.align-center {
  align-items: center;
}

.he-title {
  margin-bottom: 24px;
}

.le-form {
  margin-top: 50px;
}

.le-view-guidelines {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #623ceb;
  padding: 0;
  margin-left: 16px;
}

.le-deploy {
  width: 40%;
  margin-top: 50px;
}

.le-deploy__item {
  margin-bottom: 20px;
}

.le-deploy-1 {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 44px;
  opacity: 0.85;
}

.le-deploy-2 {
  margin-bottom: 35px;
}

.le-item__label {
  text-align: right;
  width: 123px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  opacity: 0.65;
  margin-right: 15px;
  display: inline-block;
}

.le-item__value {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  opacity: 0.85;
}
</style>
